<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://img61.ddimg.cn/upload_img/00555/touch/touch-icon-ipad.png">
    <link rel="stylesheet" href="./css/swiper-bundle-2.css">
    <link rel="stylesheet" href="./font/font2/iconfont.css">
    <link rel="stylesheet" href="./css/literature-2.css">
    <title>文学馆</title>
</head>
<body>
    <div class="header">
        <a href="./index-1.html"><i class="iconfont icon-xiaoyuhao"></i></a>
        <span>文学馆</span>
        <p></p>
    </div>
    <div class="search">
        <div class="search-box">
            <span>分类</span>
            <input type="text">
        </div>
    </div>
    <div class="swiper play1">
        <div class="swiper-wrapper">
            <div data-hash="slide1" class="swiper-slide">
                <img src="https://img63.ddimg.cn/topic_img/gys_0015875/qyj1242524lb.jpg" alt="">
            </div>
            <div data-hash="slide2" class="swiper-slide">
                <img src="https://img60.ddimg.cn/topic_img/gys_0015115/20240815nyqxx1242x524x02.jpg" alt="">
            </div>
            <div data-hash="slide3" class="swiper-slide">
                <img src="https://img62.ddimg.cn/topic_img/gys_0015875/yhzg1242524lb.jpg" alt="">
            </div>
            <div data-hash="slide4" class="swiper-slide">
                <img src="https://img50.ddimg.cn/9007410610211590.jpg" alt="">
            </div>
            <div data-hash="slide5" class="swiper-slide">
                <img src="https://img63.ddimg.cn/topic_img/gys_0015115/20240826shwyw1242x524x01.jpg" alt="">
            </div>
            <div data-hash="slide6" class="swiper-slide">
                <img src="https://img62.ddimg.cn/topic_img/gys_0016310/sfss1242x546.jpg" alt="">
            </div>
            <div data-hash="slide7" class="swiper-slide">
                <img src="https://img58.ddimg.cn/9003260446705798.jpg" alt="">
            </div>
            <div data-hash="slide8" class="swiper-slide">
                <img src="https://img61.ddimg.cn/topic_img/gys_0016429/1242_524ZTFS.jpg" alt="">
            </div>
            <div data-hash="slide9" class="swiper-slide">
                <img src="https://img62.ddimg.cn/topic_img/gys_0015115/2024.6.25DYQFPLJ1242x524.jpg" alt="">
            </div>
            <div data-hash="slide10" class="swiper-slide">
                <img src="https://img50.ddimg.cn/9002800335767510.jpg" alt="">
            </div>     
            <div data-hash="slide11" class="swiper-slide">
                <img src="https://img58.ddimg.cn/9012180355531578.jpg" alt="">
            </div>
        </div>
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="book-navs">
        <img src="https://img60.ddimg.cn/upload_img/00478/0609/01-180x180_icon-wx_01.jpg" alt="">
        <img src="https://img61.ddimg.cn/upload_img/00478/0609/01-180x180_icon-wx_02.jpg" alt="">
        <img src="https://img62.ddimg.cn/upload_img/00478/0609/01-180x180_icon-wx_04.jpg" alt="">
        <img src="https://img60.ddimg.cn/upload_img/00478/0609/01-180x180_icon-wx_05.jpg" alt="">
    </div>
    <div class="app-line"></div>
    <div class="floor">
        <div class="floor-nav">
            <div class="nav1">
                <a href="">文学</a>
            </div>
            <div class="nav2">
                <a href="">汪曾祺</a>
            </div>
            <div class="nav2">
                <a href="">古诗词</a>
                <span></span>
            </div>
            <div class="nav2">
                <a href="">李娟</a>
            </div>
            <div class="nav2">
                <a href="">押沙龙</a>
            </div>
        </div>
        <div class="floor-nav">
            <div class="nav2">
                <a href="">余秋雨</a>
            </div>
            <div class="nav2">
                <a href="">丰子恺</a>
            </div>
            <div class="nav2">
                <a href="">余秀华</a>
            </div>
            <div class="nav2">
                <a href="">叶嘉莹</a>
            </div>
            <div class="nav2">
                <a href="">蒋勋</a>
            </div>
        </div>
        <div class="floor-nav">
            <div class="nav2">
                <a href="">蔡澜</a>
                <span></span>
            </div>
            <div class="nav2">
                <a href="">黄永玉</a>
            </div>
            <div class="nav2">
                <a href="">贾平凹</a>
            </div>
            <div class="nav2">
                <a href="">冯唐</a>
            </div>
            <div class="nav2">
                <a href="">沈从文</a>
            </div>
        </div>
        <div class="floor-nav">
            <div class="nav2">
                <a href="">庆山</a>
            </div>
            <div class="nav2">
                <a href="">木心</a>
            </div>
            <div class="nav2">
                <a href="">季羡林</a>
            </div>
            <div class="nav2">
                <a href="">刘同</a>
            </div>
            <div class="nav2">
                <a href="">蒙曼</a>
            </div>
        </div>
    </div>
    <div class="app_small_horn">
        <img src="https://img61.ddimg.cn/upload_img/00471/xy/3x_118.jpg" alt="">
        <a href="">
            <span>罗翔老师推荐书单</span>
            <span>更多</span>
        </a>
    </div>
    <img class="new-book" src="https://img63.ddimg.cn/upload_img/00478/0609/720x100-xssj-0925.png" alt="">
    <div class="content-block">
        <div class="items" id="carousel">

        </div>
    </div>
    <div class="content-block">
        <div class="items" id="carousel1">
            
        </div>
    </div>
    <img class="new-book" src="https://img63.ddimg.cn/upload_img/00478/0609/720x100-zdtj-1109.png" alt="">
    <div class="content-block">
        <div class="items" id="carousel2">
            
        </div>
    </div>
    <div class="content-block">
        <div class="items" id="carousel3">
            
        </div>
    </div>
    <img class="new-book" src="https://img62.ddimg.cn/upload_img/00478/0609/720x100-zbtj-0925.png" alt="">
    <div class="content-block">
        <div class="items" id="carousel4">

        </div>
    </div>
    <div class="content-block">
        <div class="items" id="carousel5">

        </div>
    </div>
    <div class="guess">
        <div class="hand">
            <p><span class="active" onclick="handoff()">小说分类</span></p>
            <p><span onclick="handoff()">小说新书榜</span></p>
            <p><span onclick="handoff()">小说畅销榜</span></p>
            <p><span onclick="handoff()">小说飙升榜</span></p>
            <p><span onclick="handoff()">小说五星图书榜</span></p>
            <p><span onclick="handoff()">猜你喜欢</span></p>
        </div>
    </div>
    <div class="guess-like">
        <div class="more">
            <p>查看更多</p>
        </div>
        <div class="bottom">
            <div>
                <img src="./image/icon_smile-2.png" alt="">
                <p>到底了，再拉裤子都掉啦</p>
            </div>
        </div>
    </div>
    <div class="app-bottom">
        <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_01_ddsc.jpg" alt="">
        <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_02.jpg" alt="">
        <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_03.jpg" alt="">
        <img src="https://img61.ddimg.cn/upload_img/00678/zsts/ICON_04.jpg" alt="">
        <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_05.jpg" alt="">
    </div>



</body>
<!-- 1 -->
<script>
    var carousel = document.querySelector('#carousel')
    fetch('https://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=805883_53254851_805894_53845620&user_client=touch&deviceType=&udid=bca3a20681d945a34469981a82ac5d54&permanent_id=20240813195323061159417209067464662&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91').then(res => res.json()).then(res1 => {
        // console.log(res1)
        // console.log(res1.ret[5].content.value)
        // 5
        for(var i=0; i<res1.ret[1].content.value.length; i++){
            carousel.innerHTML+=`
        <div>
            <img src="${res1.ret[1].content.value[i].img_url}" alt="">
            <p>${res1.ret[1].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[1].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[1].content.value[i].sale_price)%1)!==0?((res1.ret[1].content.value[i].sale_price)%1).toFixed(1)*100:'00'}</span>
                <span class="${res1.ret[1].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[1].content.value[i].product_tags.length>0?res1.ret[1].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[1].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[1].content.value[i].ebook_price==''?'':res1.ret[1].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }

        // 6
        var carousel1 = document.querySelector('#carousel1')
        for(var i=0; i<res1.ret[2].content.value.length; i++){
            carousel1.innerHTML+=`
        <div>
            <img src="${res1.ret[2].content.value[i].img_url}" alt="">
            <p>${res1.ret[2].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[2].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[2].content.value[i].sale_price)%1)!==0?((res1.ret[2].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[2].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[2].content.value[i].product_tags.length>0?res1.ret[2].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[2].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[2].content.value[i].ebook_price==''?'':res1.ret[2].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }
    })
</script>

<!-- 2 -->
<script>
    var carousel2 = document.querySelector('#carousel2')
    fetch('https://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=805884_49078071_805894_53596895&user_client=touch&deviceType=&udid=bca3a20681d945a34469981a82ac5d54&permanent_id=20240813195323061159417209067464662&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91').then(res => res.json()).then(res1 => {
        // console.log(res1)
        // console.log(res1.ret[5].content.value)
        // 5
        for(var i=0; i<res1.ret[1].content.value.length; i++){
            carousel2.innerHTML+=`
        <div>
            <img src="${res1.ret[1].content.value[i].img_url}" alt="">
            <p>${res1.ret[1].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[1].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[1].content.value[i].sale_price)%1)!==0?((res1.ret[1].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[1].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[1].content.value[i].product_tags.length>0?res1.ret[1].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[1].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[1].content.value[i].ebook_price==''?'':res1.ret[1].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }

        // 6
        var carousel3 = document.querySelector('#carousel3')
        for(var i=0; i<res1.ret[2].content.value.length; i++){
            if(res1.ret[2].content.value != null){
            carousel3.innerHTML+=`
        <div>
            <img src="${res1.ret[2].content.value[i].img_url}" alt="">
            <p>${res1.ret[2].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[2].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[2].content.value[i].sale_price)%1)!==0?((res1.ret[2].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[2].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[2].content.value[i].product_tags.length>0?res1.ret[2].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[2].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[2].content.value[i].ebook_price==''?'':res1.ret[2].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        } else {
            event.target.parentNode.remove()
        }
        }
    })
</script>

<!-- 3 -->
<script>
    var carousel4 = document.querySelector('#carousel4')
    fetch('https://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=805885_49078073_805894_53596896&user_client=touch&deviceType=&udid=bca3a20681d945a34469981a82ac5d54&permanent_id=20240813195323061159417209067464662&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91').then(res => res.json()).then(res1 => {
        console.log(res1)
        for(var i=0; i<res1.ret[1].content.value.length; i++){
            carousel4.innerHTML+=`
        <div>
            <img src="${res1.ret[1].content.value[i].img_url}" alt="">
            <p>${res1.ret[1].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[1].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[1].content.value[i].sale_price)%1)!==0?((res1.ret[1].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[1].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[1].content.value[i].product_tags.length>0?res1.ret[1].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[1].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[1].content.value[i].ebook_price==''?'':res1.ret[1].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }

        // 6
        var carousel5 = document.querySelector('#carousel5')
        for(var i=0; i<res1.ret[2].content.value.length; i++){
            carousel5.innerHTML+=`
        <div>
            <img src="${res1.ret[2].content.value[i].img_url}" alt="">
            <p>${res1.ret[2].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[2].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[2].content.value[i].sale_price)%1)!==0?((res1.ret[2].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[2].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[2].content.value[i].product_tags.length>0?res1.ret[2].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[2].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[2].content.value[i].ebook_price==''?'':res1.ret[2].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }
    })
</script>

<!-- 点击切换 -->
<script>
    var hand = document.querySelectorAll('.hand p span')
    var active1 = document.querySelector('.active1')
handoff=function(){
    for(var i=0; i<hand.length; i++){
        hand[i].classList.remove('active')
    }
    event.target.classList.add('active')
}
</script>

<script src="./js/reset-2.js"></script>
<!-- Swiper JS -->
<script src="./js/swiper-bundle-2.js"></script>
<script>
    var swiper = new Swiper(".play1", {
        autoplay: true,//等同于以下设置
        loop:true,
        autoplay: {
            delay: 2000,
            stopOnLastSlide: true,
            disableOnInteraction: false,
        },
        spaceBetween: 0,
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: ".play1 .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".play1 .swiper-button-next",
            prevEl: ".play1 .swiper-button-prev",
        },
    });
    var swiper = new Swiper(".play2", {
        autoplay: true,//等同于以下设置
        loop:true,
        autoplay: {
            delay: 2000,
            stopOnLastSlide: true,
            disableOnInteraction: false,
        },
        spaceBetween: 0,
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: ".play2 .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".play2 .swiper-button-next",
            prevEl: ".play2 .swiper-button-prev",
        },
    });
</script>

</html>